import React, { useState , useEffect} from 'react';
import { Button, Modal, Form, Input } from 'antd';
import '../Css/LocationAlterCss/LocationAlterCss.less'
interface DataType {
    key: React.Key; //id
    id: number //序号
    img: string //图片
    name: string; //商品名
    sernum: string //货号
    price: string //价格
    rec: string //分类
    sell: number //销量
    seat: string; //使用行程
    state: number //以未上架判断
}
interface PropsType {
    isModalOpen: boolean,
    closeModal(): void,
    seat: DataType | any//暂时的这样吧 :)
    getChild(val:{}): void//接受子元素的值的方法
}
function LocationAlter(props: PropsType) {
    //位置更改后的数据
    const [changeSeat,setChangeSeat] = useState<{} | any>()
    const [form] = Form.useForm();
    //点击取消
    const handleCancel = () => {
        props.closeModal()
        console.log('点击了取消');
    }
    const onFinish = (values: any) => {
        // console.log('Success:', values);
        // setChangeSeat({id:props.seat.key,seat:values.address})
        setTimeout(()=>{
            setChangeSeat({id:props.seat.key,seat:values.address})
            console.log(changeSeat);
            //调用父组件传过来的方法
            props.getChild(changeSeat)
            props.closeModal()
        },1000)
    };
    useEffect(()=>{
        form.setFieldsValue({
            seat:props.seat?.seat
        })
    },[props])
    const onFinishFailed = (errorInfo: any) => {
        console.log('Failed:', errorInfo);
    };
    //取消按钮
    const onReset=()=>{
        props.closeModal()
    }
    return (
        <div className='LocationAlter'>
            {/* onOk={handleOk} */}
            <Modal title="位置" open={props.isModalOpen} onCancel={handleCancel} footer={null} centered={true}>
                    <Form
                        name="basic"
                        initialValues={{ remember: true }}
                        // labelCol={{ span: 8 }}
                        // wrapperCol={{ span: 16 }}
                        style={{ maxWidth: 600 }}
                        onFinish={onFinish}
                        onFinishFailed={onFinishFailed}
                        // autoComplete="off"
                        form={form}
                    >
                        <Form.Item
                            label="位置"
                            name='seat'
                            rules={[{ required: false, message: 'Please input your username!' }]}
                            initialValue={props.seat?.seat}
                        >
                            <Input/>
                        </Form.Item>
                        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                            <Button type="primary" htmlType="submit">
                                确定
                            </Button>
                            <Button htmlType="button" onClick={onReset}>
                                取消
                            </Button>
                        </Form.Item>
                    </Form>
            </Modal>
        </div>
    )
}
export default LocationAlter